<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户管理</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/easyui/locale/easyui-lang-zh_CN.js"></script>
<style type="text/css">
.input{
	width: 165px;
}
.roleInput{
	width: 107px;
}
</style>
<script type="text/javascript" language="javascript">
	$(function(){
		//加载下拉框数据
		$.ajax({
			type:'GET',
			dataType:'json',
			url:'${pageContext.request.contextPath }/roleList',
			success:function(data){
				data.unshift({'roleid':'','rolename':'全部'});
				$("#roleCheckbox").combobox({
					data:data,
					valueField:'roleid',
					textField:'rolename',
					panelHeight:'auto',
					editable:false
				}) ;
			}
		}) ;
		
		//自定义验证规则 
		$.extend($.fn.validatebox.defaults.rules,{
			//验证用户名是否存在
			vaildUserName:{ 
				validator:function(value) {
					var res = "" ;
					$.ajax({
						type:'GET',
						async:false,
						data:{
							username:value
						},
						url:'${pageContext.request.contextPath }/vaildUserName',
						success:function(data){
							res = data.data ;
						}
					}) ;
					return res == "true" ;
				},
				message:'此用户已经存在'
			}
		}) ;
		
		$("#searchBtn").click(function(){
			var username = $("#s_username").val() ;
			var roleid = $("#roleCheckbox").combobox("getValue") ;
			$("#userTable").datagrid("load",{
				username:username,
				roleid:roleid
			});
			return false ;
		}) ;
		
		$("#addBtn").click(function(){
			$("#addDlg").dialog("open").dialog("setTitle","新增用户") ;
			$("#roleid").val("") ;
			$("#rolename").val("") ;
			return false ;
		}) ;
		
		$("#editBtn").click(function(){
			var selectedRows = $("#userTable").datagrid("getSelections") ;
			if(selectedRows.length != 1) {
				$.messager.alert("系统提示","请选择一条数据") ;
			} else {
				var row = selectedRows[0] ;
				$.ajax({
					type:'GET',
					async:false,
					url:'${pageContext.request.contextPath }/minute/' + row.userid,
					success:function(data){
						$("#u_userid").val(data.userid) ;
						$("#u_username").val(data.username) ;
						$("#u_roleid").val(data.roleid) ;
						$("#u_rolename").val(data.rolename) ;
						$("#u_userdescription").val(data.userdescription) ;
					}
					
				}) ;
				$("#updateDlg").dialog("open").dialog("setTitle","修改用户") ;				
			}
			return false ;
		}) ;
		
		$("#removeBtn").click(function(){
			var selectedRows = $("#userTable").datagrid("getSelections") ;
			if(selectedRows.length == 0) {
				$.messager.alert("系统提示","请至少选择一条数据") ;
				return false ;
			} else {
				$.messager.confirm("系统提示","您确定要删除这 " + selectedRows.length + " 条数据吗？",function(r){
					if(r) {
						var strIds = [] ;
						for(var i = 0;i < selectedRows.length; i++) {
							strIds.push(selectedRows[i].userid) ;
						}
						var ids = strIds.join(",") ;
						$.ajax({
							type:"DELETE",
							url:"${pageContext.request.contextPath }/remove/" + ids,
							success:function(data) {
								$.messager.alert("系统提示",data.data) ;
								$("#userTable").datagrid("load") ;
							}
						}) ;
					}
				}) ;
			}
			return false ;
		}) ;
		
		$("#comfireBtn").click(function(){
			//验证表单
			var flag = $("#userForm").form("validate") ;
			if(flag) {
				var username = $("#username").val() ;
				var password = $("#password").val() ;
				var roleid = $("#roleid").val() ;
				var userdescription = $("#userdescription").val() ;
				$.ajax({
					type:'POST',
					url:'${pageContext.request.contextPath }/addUser',
					data:{
						username:username,
						password:password,
						roleid:roleid,
						userdescription:userdescription
					},
					success:function(data){
						$.messager.alert("系统提示",data.data) ;
						$("#addDlg").dialog("close") ;
						$("#userTable").datagrid("load");
						$("#username").val("") ;
						$("#password").val("") ;
						$("#roleid").val("") ;
						$("#rolename").val("") ;
						$("#userdescription").val("") ;
					}
				}) ;
			}
			return false ;
		}) ;
		
		
		$("#comfireuBtn").click(function(){
			//验证表单
			var flag = $("#uUserForm").form("validate") ;
			if(flag) {
				var userid = $("#u_userid").val() ;
				var username = $("#u_username").val() ;
				var roleid = $("#u_roleid").val() ;
				var userdescription = $("#u_userdescription").val() ;
				$.ajax({
					type:'POST',
					url:'${pageContext.request.contextPath }/addUser',
					data:{
						userid:userid,
						username:username,
						roleid:roleid,
						userdescription:userdescription
					},
					success:function(data){
						$.messager.alert("系统提示",data.data) ;
						$("#updateDlg").dialog("close");
						$("#userTable").datagrid("load");
						$("#u_userid").val("") ;
						$("#u_username").val("") ;
						$("#u_roleid").val("") ;
						$("#u_userdescription").val("") ;
					}
				}) ;
			}
			return false ;
		}) ;
		
		$("#roleBtn").click(function(){
			$("#roleDialog").dialog("open").dialog("setTitle","选择角色") ;
			return false ;
		}) ;
		
		$("#roleuBtn").click(function(){
			$("#roleDialog").dialog("open").dialog("setTitle","选择角色") ;
			return false ;
		}) ;
		
		$("#sroleBtn").click(function(){
			var rolename = $("#s_rolename").val() ;
			$("#roleTable").datagrid("load",{
				rolename:rolename
			}) ;
			return false ;
		}) ;
		
		$("#rokBtn").click(function(){
			var row = $("#roleTable").datagrid("getSelected") ;
			if(row != null) {
				$("#roleid").val(row.roleid) ;
				$("#rolename").val(row.rolename) ;
				$("#u_roleid").val(row.roleid) ;
				$("#u_rolename").val(row.rolename) ;
				$("#roleTable").datagrid("clearSelections") ;
				$("#roleDialog").dialog("close") ;				
			} else {
				$.messager.alert("系统提示","请选择一条数据") ;
			}
			return false ;
		}) ;
		
		$("#rcloseBtn").click(function(){
			$("#s_rolename").val("") ;
			$("#roleTable").datagrid("load",{
				rolename:""
			}) ;
			
			$("#roleDialog").dialog("close") ;
			return false ;
		}) ;
	}) ;
</script>
</head>
<body style="margin: 1px;">
	<table class="easyui-datagrid" id="userTable" data-options="
		title:'用户管理',
		method:'GET',
		url:'${pageContext.request.contextPath }/userList',
		fitColumns:true,
		fit:true,
		pagination:true,
		rownumbers:true,
		toolbar:'#tb'
	">
		<thead>
			<tr>
				<th field="cb" checkbox="true" align="center"></th>
				<th field="userid" width="50" align="center" hidden>编号</th>
				<th field="username" width="150" align="center">用户名</th>
				<th field="roleid" width="50" hidden>角色id</th>
				<th field="rolename" width="150" align="center">角色</th>
				<th field="userdescription" width="300" align="center">备注</th>
			</tr>
		</thead>
	</table>
	
	<div id="tb">
		<div>
			<a id="addBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加用户</a>
			<a id="editBtn" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改用户</a>
			<a id="removeBtn" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除用户</a>
		</div>
		<hr />
		<div>
			用户名：<input type="text" id="s_username" name="s_username" />
			角色：<input id="roleCheckbox" class="easyui-combobox" id="s_rolenId" name="s_roleId"/>
			<a id="searchBtn" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">查询</a>
		</div>
	</div>
	<div id="addDlg" class="easyui-dialog" style="width: 400px;height: 235px;padding: 10px;"
		data-options="modal:true,closed:true,buttons:'#dlg-buttons',iconCls:'icon-edit'">
		<form id="userForm" style="margin-top: 5px;margin-left: 50px;">
			<table>
				<tr>
					<td align="right">用户名：</td>
					<td><input class="easyui-validatebox input" id="username" name="username" data-options="required:true,validType:'vaildUserName'"/></td>
				</tr>
				<tr>
					<td align="right">密码：</td>
					<td><input class="easyui-validatebox input" id="password" name="password" data-options="required:true"/></td>
				</tr>
				<tr>
					<td align="right">角色：</td>
					<td>
						<input type="hidden" id="roleid" name="roleid" data-options="required:true"/>
						<input class="easyui-validatebox roleInput" id="rolename" name="rolename" data-options="required:true"/>
						<a class="easyui-linkbutton" id="roleBtn">选择角色</a>
					</td>
				</tr>
				<tr>
					<td align="right">备注：</td>
					<td><textarea rows="3" cols="21" id="userdescription" name="userdescription"></textarea></td>
				</tr>
			</table>
		</form>
	</div>
	<div id="dlg-buttons">
		<a class="easyui-linkbutton" id="comfireBtn" data-options="iconCls:'icon-ok'">确认</a>
	</div>
	
	<div id="updateDlg" class="easyui-dialog" style="width: 400px;height: 235px;padding: 10px;"
		data-options="modal:true,closed:true,buttons:'#updlg-buttons',iconCls:'icon-edit'">
		<form id="uUserForm" style="margin-top: 5px;margin-left: 50px;">
			<table>
				<tr>
					<td><input type="hidden" id="u_userid" name="u_userid" /></td>
				</tr>
				<tr>
					<td align="right">用户名：</td>
					<td><input class="easyui-validatebox input" id="u_username" name="u_username" readonly/></td>
					<td></td>
				</tr>
				<tr>
					<td align="right">角色：</td>
					<td>
						<input type="hidden" id="u_roleid" name="u_roleid"/>
						<input class="easyui-validatebox roleInput" id="u_rolename" name="u_rolename" data-options="required:true"/>
						<a class="easyui-linkbutton" id="roleuBtn">选择角色</a>
					</td>
				</tr>
				<tr>
					<td align="right">备注：</td>
					<td><textarea rows="3" cols="21" id="u_userdescription" name="u_userdescription"></textarea></td>
				</tr>
			</table>
		</form>
	</div>
	<div id="updlg-buttons">
		<a class="easyui-linkbutton" id="comfireuBtn" data-options="iconCls:'icon-ok'">确认</a>
	</div>
	
	<div id="roleDialog" class="easyui-dialog" style="width: 500px;height: 480px;padding: 10px 20px;" data-options="iconCls:'icon-search',closed:true,buttons:'#roleDlgBtn'">
		<div style="height: 40px;" align="center">
			角色名称：<input type="text" id="s_rolename" name="s_rolename"/>
			<a id="sroleBtn" class="easyui-linkbutton" style="margin-bottom: 4px;" data-options="iconCls:'icon-search',plain:true">查询</a>
		</div>
		<div style="height: 350px;">
			<table id="roleTable" class="easyui-datagrid" data-options="
				title:'角色列表',
				method:'GET',
				url:'${pageContext.request.contextPath }/rolepageList',
				fitColumns:true,
				fit:true,
				singleSelect:true,
				pagination:true,
				rownumbers:true
				">
				<thead>
					<tr>
						<th field="roleid" hidden></th>
						<th field="rolename" width="200">角色名称</th>
						<th field="roledescription" width="300">备注</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
	<div id="roleDlgBtn">
		<a id="rokBtn" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">确认</a>
		<a id="rcloseBtn" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">关闭</a>
	</div>
</body>
</html>